<template>
    <div class="search-container">
        <el-input v-model="query" placeholder="请输入搜索内容" class="search-input" @keyup.enter.native="handleSearch">
            <template #append>
                <el-icon>
                    <Search />
                </el-icon>
            </template>
        </el-input>
    </div>
</template>

<script>
export default {
    name: 'SearchBox',
    data() {
        return {
            query: ''
        }
    },
    methods: {
        handleSearch() {
            console.log('Searching for:', this.query);
            // 在这里实现你的搜索逻辑
        }
    }
}
</script>

<style scoped>
.search-container {
    display: flex;
    justify-content: center;
    margin-top: 100px;
    /* 根据需要调整 */
}

.enhanced-search-input .el-input__inner {
    height: 50px;
    /* 增加输入框高度 */
    font-size: 18px;
    /* 调整字体大小以匹配输入框大小 */
    border-radius: 25px;
    /* 圆角处理 */
    padding-left: 20px;
    /* 增加内边距 */
    transition: all 0.3s ease;
    /* 平滑过渡效果 */
}

.enhanced-search-input .el-input-group__append {
    border: none;
    /* 移除默认边框 */
}

.enhanced-search-input .el-button {
    height: 50px;
    /* 确保按钮与输入框高度一致 */
    width: 50px;
    /* 设置一个正方形的搜索按钮 */
    border-radius: 0 25px 25px 0;
    /* 确保按钮与输入框圆角匹配 */
    background-color: #409EFF;
    /* 自定义按钮颜色 */
    color: white;
    /* 文字颜色 */
    font-size: 18px;
    /* 调整图标大小 */
    transition: background-color 0.3s ease;
    /* 按钮背景色过渡 */
}

.enhanced-search-input .el-button:hover {
    background-color: #66b1ff;
    /* 鼠标悬停时的背景色 */
}
</style>